<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Node上传数据</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/Node.css' %}">
    <script>
        toggleNavbar = function () {
            const navbar = document.getElementById('navbar');
            const mainContent = document.getElementById('main-content');
            const toggleButton = document.getElementById('toggleButton'); // 获取按钮元素

            if (navbar.classList.contains('hidden')) {
                navbar.classList.remove('hidden'); // 显示导航
                mainContent.style.width = '80%'; // 恢复主内容宽度
                toggleButton.innerHTML = '<img  class="button4-icon" src="{% static 'icons/chevron-left.svg' %}" alt="左箭头">'; // 切换按钮文字
            } else {
                navbar.classList.add('hidden'); // 隐藏导航
                mainContent.style.width = '100%'; // 主内容占满整个页面
                toggleButton.innerHTML = '<img  class="button4-icon" src="{% static 'icons/chevron-right.svg' %}" alt="右箭头">'; // 切换按钮文字
            }
        }

        window.addEventListener('load', function() {
        const messages = document.getElementById('messages');
        if (messages) {
            setTimeout(() => {
                messages.classList.add('hide');
            }, 4000); // 4秒后开始淡出
            setTimeout(() => {
                messages.style.display = 'none';
            }, 5000); // 5秒后完全隐藏
        }
    });

         // 触发文件选择框
    function triggerFileInput() {
        document.getElementById('file-input').click();  // 手动触发文件选择框
    }

    // 显示文件名
    function displayFileName(event) {
        var input = event.target;
        var fileName = input.files[0] ? input.files[0].name : "未选择文件";
        document.getElementById('file-name').textContent = fileName;
    }

    // 处理拖拽文件的函数
    function handleFileDrop(event) {
        event.preventDefault();  // 阻止默认行为，防止文件在浏览器中打开
        var files = event.dataTransfer.files;  // 获取拖拽的文件
        if (files.length > 0) {
            document.getElementById('file-input').files = files;  // 将文件传给隐藏的input
            displayFileName({ target: document.getElementById('file-input') });  // 显示文件名
        }
    }

    // 阻止浏览器默认的拖拽行为
    function preventDefaults(event) {
        event.preventDefault();
        event.stopPropagation();
    }

    // 添加拖拽样式
    function highlightDragArea() {
        document.getElementById('drag-area').classList.add('dragging');
    }

    // 移除拖拽样式
    function unhighlightDragArea() {
        document.getElementById('drag-area').classList.remove('dragging');
    }

    // 初始化拖拽功能
    function initDragAndDrop() {
        let dropArea = document.getElementById('drag-area');

        // 监听拖拽事件
        ['dragenter', 'dragover'].forEach(eventName => {
            dropArea.addEventListener(eventName, preventDefaults, false);
            dropArea.addEventListener(eventName, highlightDragArea, false);
        });

        ['dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, preventDefaults, false);
            dropArea.addEventListener(eventName, unhighlightDragArea, false);
        });

        // 当文件拖拽到区域并松开鼠标时，触发 handleFileDrop
        dropArea.addEventListener('drop', handleFileDrop, false);
    }

    // 确保 DOM 加载完成后执行
    document.addEventListener("DOMContentLoaded", initDragAndDrop);
    </script>
</head>
<body>

<div class="sidebar" id="navbar">
  <img class="logo" src="{% static 'icons/logo.jpg' %}" alt="logo图标">
    <p class="title">SecTraffic</p>
    <p class="underline"></p>
    <div>
        <a href="{% url 'Node' %}">
            <button class="button1">
                <img class="button1-icon" src="{% static 'icons/graynode.png' %}" alt="节点图标">
                <span> Node----上传数据</span>
            </button>
        </a>
    </div>
    <div>
        <a href="{% url 'NodeInquiry' %}">
            <button class="button1">
                <img class="button1-icon" src="{% static 'icons/graynode.png' %}" alt="节点图标">
                <span> Node----查询预测结果</span>
            </button>
        </a>
    </div>
</div>


<div class="content" id="main-content">
    <p>
        <!-- 点击按钮以隐藏或显示导航 -->
        <button class="button4" onclick="toggleNavbar()" id="toggleButton">
            <img class="button4-icon" src="{% static 'icons/chevron-left.svg' %}" alt="隐藏">
        </button>
    </p>


    <form action="{% url 'Node' %}" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <div class="upload-box">
            <h2>上传文件</h2>
            <!-- 文件拖拽区域 -->
            <div class="drag-area" id="drag-area">
                <div class="icon">
                    <img src="{% static 'icons/upload-icon.png' %}" alt="文件上传图标">
                </div>
                <p>拖拽文件至此或 <span class="browse-link" onclick="triggerFileInput()">浏览本地文件</span></p>
                <!-- 隐藏的文件选择框 -->
                <input type="file" id="file-input" name="file" style="display: none;" onchange="displayFileName(event)" required>

                <!-- 用于显示选择的文件名 -->
                <p id="file-name">未选择文件</p>
            </div>
            <small>支持格式：XLS, XLSX</small>
            <!-- 示例文件下载部分 -->
            <div class="example-box">
                <div class="example-icon">
                    <img src="{% static 'icons/example-icon.png' %}" alt="示例图标">
                    <text class="exa1">表格示例</text>
                    <button class="download-btn">下载</button>
                </div>
                <div class="example-text">
                    <p class="exa2">你可以下载该附件示例，作为你上传数据的模板</p>
                </div>
            </div>

        </div>
        <!-- 上传按钮 -->
        <button class="upload-btn">上 传</button>
        <!-- 消息显示区域 -->
        {% if messages %}
            <div class="messages" id="messages">
                {% for message in messages %}
                    <div class="{% if message.tags %}{{ message.tags }}{% endif %}">
                        {{ message }}
                    </div>
                {% endfor %}
            </div>
        {% endif %}
    </form>



</div>
</body>
</html>